<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<link rel="stylesheet" href="../../css/animate.css">
		<link rel="stylesheet" href="../../iconfont/iconfont.css">
		<link rel="stylesheet" href="../../css/mescroll.css">
		<link rel="stylesheet" href="../../css/gloab.css">
		<title>我要赚钱</title>
		<style>
			body {
				background-color: #fff
			}

			* {
				padding: 0;
				margin: 0;
			}

			.container {
				max-width: 480px;
				margin: 0.15rem auto 0;
			}

			.slide {
				width: 100%;
				min-height: 9rem;
				overflow: hidden;
				position: relative;
				top: -1.2rem;
				margin-bottom: 2rem;
			}

			.slide .img {
				overflow: hidden;
				position: absolute;
				transition: width 0.4s, height 0.4s, top 0.4s, left 0.4s, z-index 0.4s;
			}

			.slide .img img {
				width: calc(100% - 1%);
				height: calc(100% - 1%);
				margin: 7px;
			}

			.slide .img1 {
				width: 40%;
				height: 40%;
				top: 30%;
				left: -50%;
				z-index: 1;
			}

			.slide .img2 {
				width: 60%;
				height: 60%;
				top: 20%;
				left: -20%;
				z-index: 2;
			}

			.slide .img3 {
				width: 80%;
				height: 80%;
				top: 10%;
				left: 10%;
				z-index: 3;
			}

			.slide .img4 {
				width: 60%;
				height: 60%;
				top: 20%;
				left: 60%;
				z-index: 2;
			}

			.slide .img5 {
				width: 40%;
				height: 40%;
				top: 30%;
				left: 110%;
				z-index: 1;
			}

			button {
				width: 50px;
				margin: 20px;
			}

			.title {
				margin: auto 0;
				width: 100%;
				text-align: center;
				font-weight: bold;
				font-size: 0.34rem;
			}

			.content {
				/*text-align: center;*/
				width: 80%;
				margin: 0.2rem auto 0;
				padding: 0 0.21rem;
				color: #f00;
			}

			.contents {
				/*text-align: center;*/
				width: 75%;
				margin: -1.8rem auto 0;
				padding: 0 0.21rem;
				color: #0c0;
			}

			.lt {
				float: left;
				margin-left: 1rem;
				background: #e6d73e;
			}

			.rt {
				float: right;
				margin-right: 1rem;
				background: #f00;
			}

			.ht {
				margin-left: 3rem;
				background: blue;
			}

			.btn {
				border-radius: 0.5rem;
				width: 20%;
				height: 0.45rem;
				text-align: center;
				line-height: 0.45rem;
				color: #fff;
				margin-top: 0.25rem;
			}

			.btn-body {
				border-bottom: 2px solid #d19a66;
				width: 0.5rem;
			}

			.btn-bodys {
				border: 2px solid #d19a66;
				width: 0.15rem;
				height: 0.15rem;
				border-radius: 0.25rem;
			}

			.btn-submits {
				background: #0f0;
				width: 1rem;
				height: 0.35rem;
				font-size: 0.24rem;
				line-height: 0.35rem;
				border-radius: 0.1rem;
				color: #fff;
			}

			.btn-submit {
				background: #0f0;
				width: auto;
				display: inline-block;
				height: 0.35rem;
				font-size: 0.24rem;
				line-height: 0.35rem;
				border-radius: 0.3rem;
				padding: 0.02rem;
				color: #fff;
				padding: 0.02rem 0.1rem;
			}

			.title-content {
				width: 40%;
				margin: auto;
				height: 0.65rem;
				line-height0.65rem;
				text-align: center;
			}

			.content-body {
				width: 90%;
				margin: 0 auto;
				padding: 0.1rem;
				border: 1px solid #eee;
				border-radius: 0.05rem;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div id="public-header">
				<div id="statusbar"></div>
				<header class="public-header">
					<div class="public-header-lf iconfont icon-fanhui" @click="close"></div>
					<div class="public-header-title"><span class="btn"></span>我要赚钱 <span class="btn"></span></div>
				</header>
			</div>
			<div class="container" style="background-color:#fff;">
				<div class="title-content">
					<span class="btn-body" style="margin-top:0.25rem;float:left;"></span>
					<span class="btn-bodys" style="margin-top:0.18rem;float:left;"></span>
					<span class="title" style="">推广海报</span>
					<span class="btn-body" style="float:right;padding-top:0.25rem;"></span>
					<span class="btn-bodys" style="margin-top:0.18rem;float:right;"></span>
				</div>
				<div id="slide" class="slide">
				</div>
				<!--  
         <div v-for="(item,index) in postList" class="img" @click="getList(index)">
           <img  src="../../icon/d.png" alt="">
         
      </div> -->
				<div class="contents">点击打开单张保存,建议带上推广链接推广</div>
				<div class="content">通告：禁止在海报上打上其他文字，发现会被禁止域名使用，如要加文字，请自行制作不带二维码的图片.</div>
				<div class="btn lt" @click="javascript:api.openWin({name: 'take_vip',reload:true,url:'../personal/take_vip.html',});">升级VIP</div>
				<div class="btn rt" @click="javascript:api.openWin({name: 'take_zz',reload:true,url:'../personal/take_zz.html',});">升级站长</div>
				<div class="btn ht" @click="javascript:api.openWin({name: 'take_zz',reload:true,url:'../personal/take_hhr.html',});">升级合伙人</div>
			</div>
			<div style="width:100%;margin:0 auto 0rem;float:left;padding-bottom:0.5rem;">
				<div class="title-content" style="margin:0.25rem auto 0;">
					<span class="btn-body" style="margin-top:0.25rem;float:left;"></span>
					<span class="btn-bodys" style="margin-top:0.18rem;float:left;"></span>
					<span class="title" style="">推广文案</span>
					<span class="btn-body" style="float:right;padding-top:0.25rem;"></span>
					<span class="btn-bodys" style="margin-top:0.18rem;float:right;"></span>
				</div>
				<div class="content-body" v-if="list&&list.length>0" v-for="(item,index) in list">
					<div id="content" v-html="item.content"></div>
					<div style="overflow:hidden;">链接：{{apiUrl1+"/index/index/index/pid/"+uid}}</div>
					<div class="btn-submits" @click="copy(item.content,index)">点击复制</div>
					<div style="border-bottom:1px solid #0e0;width:100%;float:left;height:1px;margin:0.1rem auto;"></div>
				</div>
				<div style="width:90%;margin:auto">
					<span style="color:#d19a66;">提示：推广链接会变化无须理会，只需获取一次即可。</span>
					<span style="color:#f00;">推广有用户发布广告等消费即可获得收益.</span>
					<!-- <div>
          <span class="btn-submit">更多文案</span>
        </div> -->
				</div>
				<div class="title-content">
					<span class="btn-body" style="margin-top:0.25rem;float:left;"></span>
					<span class="btn-bodys" style="margin-top:0.18rem;float:left;"></span>
					<span class="title" style="">奖励说明</span>
					<span class="btn-body" style="float:right;padding-top:0.25rem;"></span>
					<span class="btn-bodys" style="margin-top:0.18rem;float:right;"></span>
				</div>
				<div class="content-body" v-html="res">
				</div>
				<!-- <div>
        <span class="btn-submit">奖励说明详情</span>
      </div> -->
			</div>
		</div>
	</body>
	<script src="../../script/api.js"></script>
	<script src="../../script/mescroll.js"></script>
	<script src="../../script/vue.js"></script>
	<script src="../../script/app.js"></script>
	<script src="../../script/jquery-1.8.3.min.js"></script>
	<script src="../../script/fastclick.js"></script>

	<script>
		var vm;
		var mescroll;
		apiready = function() {
			setBar("statusbar");
			setFont(750);
			startVue();
			// is_logins();
			$(".public-progress").fadeOut(1000);
			setTimeout(function() {
				$(".public-progress").css({
					"display": "none"
				});
			}, 1000);
		}

		function startVue() {
			vm = new Vue({
				el: "#app",
				data: {
					list: [],
					res: [],
					// postLists:['/storage/emulated/0/Android/data/com.u704833366.dvm/cache/1585216096423.png','/storage/emulated/0/Android/data/com.u704833366.dvm/cache/1585216096974.png','/storage/emulated/0/Android/data/com.u704833366.dvm/cache/1585216097433.png'],
					postList: [],
					arr: [],
					num: 0,
					data: [],
					uid: ""
				},
				created: function() {
					this.getCopyList();
					this.getPostList();
				},
				methods: {
					close: function() {
						api.closeToWin({
							name: 'root'
						});
						api.execScript({
							name: 'root',
							script: 'qhSelect(0);'
						});
					},
					//生成
					shuaxin: function() {
						history.go(0);
					},
					add: function() {
						if (vm.num == 3) {
							setTimeout(() => {
								init();
							}, 500);
							return false;
						}
						var images = apiUrl + vm.data[vm.num].image;
						var url = vm.data[vm.num].url + '/pid/' + $api.getStorage('token');
						/* var makeSharePic = api.require('makeSharePic');
						 makeSharePic.createErweimaPic({
						     fileName:new Date().getTime()+'.png',
						     qrCode:url,
						     bgColor:"#ffffff"
						 },function(retss,err){
						     if(err){
						         alert(JSON.stringify(err));
						     }else{
						         makeSharePic.composePic({
						             bgPicUrl:images,
						             attachPicUrl:retss.filePath,
						             fileName:new Date().getTime()+'.png',
						             mainWidth:512,
						             mainHeight:790,
						             subWidth:270,
						             l:120,
						             t:390,
						         },function(rets,err){
						             if(err){
						                 alert(JSON.stringify(err));
						             }else{
						               vm.postList.push(rets.filePath);
						               if (vm.num<vm.data.length) {
						                 vm.num++;
						                 vm.add();
						                 api.hideProgress();
						               }
						             }
						         });
						     }
						 }); */


					},
					getPostList: function() {
						api.showProgress({
							title: '努力加载中...',
							text: '先喝杯茶...',
							modal: false
						});
						api.ajax({
							url: apiUrl + '/api/user/getPoster',
							method: 'post',
							data: {
								values: {
									token: $api.getStorage('token')
								},
							}
						}, function(ret, err) {
							console.log(JSON.stringify(ret.data))
							if (ret.code == 1) {
								vm.data = ret.data;
								lunbo();
								api.hideProgress();
								/*  vm.add(); */
							} else {
								vm.postList = ret.data;
							}
						});

					},
					getCopyList: function() {
						api.closeFrame({
							name: 'zhanzhang'
						});
						api.ajax({
							url: apiUrl + '/api/user/recdesc',
							method: 'post',
							data: {
								values: {
									token: $api.getStorage('token')
								},
							}
						}, function(ret, err) {
							console.log(JSON.stringify(ret))
							if (ret.code == 1) {
								vm.list = ret.data.list;
								vm.res = ret.data.jl_desc;
								vm.uid = ret.data.uid;
							} else {}
						});
					},
					//跳转到分享页面
					getList: function(index) {
						var url = vm.postList[index];
						// console.log(JSON.stringify(url));return;
						// var url = $('#'+index+'').attr('src');
						api.openWin({
							name: 'fenxiang',
							url: './fenxiang.html',
							pageParam: {
								url: url
							}
						});

					},
					copy: function(res, index) {
						var data = res.replace(/<[^>]+>/g, "");
						var clipBoard = api.require('clipBoard');
						var content = data + apiUrl1 + "/index/index/index/pid/" + vm.uid;
						clipBoard.set({
							value: content,
						}, function(ret, err) {
							console.log(JSON.stringify(ret))
							if (ret) {
								api.toast({
									msg: '复制成功！',
									duration: 2000,
									location: 'middle'
								});
							} else {
								api.toast({
									msg: '复制失败！',
									duration: 2000,
									location: 'middle'
								});
							}
						});
					},
				}
			})
		}
		var autoLb = true; //autoLb=true为开启自动轮播
		var autoLbtime = 2; //autoLbtime为轮播间隔时间（单位秒）
		var touch = true; //touch=true为开启触摸滑动
		var slideBt = true; //slideBt=true为开启滚动按钮
		var slideNub; //轮播图片数量

		//窗口大小改变时改变轮播图宽高
		$(window).resize(function() {
			$(".slide").height($(".slide").width() * 0.56);
		});
		// function is_logins(){
		//   if (!is_login()) {
		//     api.openWin({
		//         name: 'login',
		//         reload:true,
		//         url: '../personal/login.html',
		//     });
		//   }
		// };
		function init() {
			$(".slide").height($(".slide").width() * 0.56);
			slideNub = $(".slide .img").size(); //获取轮播图片数量
			for (i = 0; i < slideNub; i++) {
				$(".slide .img:eq(" + i + ")").attr("data-slide-imgId", i);
			}

			//根据轮播图片数量设定图片位置对应的class
			if (slideNub == 1) {
				for (i = 0; i < slideNub; i++) {
					$(".slide .img:eq(" + i + ")").addClass("img3");
				}
			}
			if (slideNub == 2) {
				for (i = 0; i < slideNub; i++) {
					$(".slide .img:eq(" + i + ")").addClass("img" + (i + 3));
				}
			}
			if (slideNub == 3) {
				for (i = 0; i < slideNub; i++) {
					$(".slide .img:eq(" + i + ")").addClass("img" + (i + 2));
				}
			}
			if (slideNub > 3 && slideNub < 6) {
				for (i = 0; i < slideNub; i++) {
					$(".slide .img:eq(" + i + ")").addClass("img" + (i + 1));
				}
			}
			if (slideNub >= 6) {
				for (i = 0; i < slideNub; i++) {
					if (i < 5) {
						$(".slide .img:eq(" + i + ")").addClass("img" + (i + 1));
					} else {
						$(".slide .img:eq(" + i + ")").addClass("img5");
					}
				}
			}


			//自动轮播
			if (autoLb) {
				setInterval(function() {
					right();
				}, autoLbtime * 1000);
			}


			if (touch) { //触摸滑动
				k_touch();
			}
			slideLi();
			imgClickFy();
		};

		//右滑动
		function right() {
			var fy = new Array();
			for (i = 0; i < slideNub; i++) {
				fy[i] = $(".slide .img[data-slide-imgId=" + i + "]").attr("class");
			}
			for (i = 0; i < slideNub; i++) {
				if (i == 0) {
					$(".slide .img[data-slide-imgId=" + i + "]").attr("class", fy[slideNub - 1]);
				} else {
					$(".slide .img[data-slide-imgId=" + i + "]").attr("class", fy[i - 1]);
				}
			}
			imgClickFy();
			slideLi();
		}

		//左滑动
		function left() {
			var fy = new Array();
			for (i = 0; i < slideNub; i++) {
				fy[i] = $(".slide .img[data-slide-imgId=" + i + "]").attr("class");
			}
			for (i = 0; i < slideNub; i++) {
				if (i == (slideNub - 1)) {
					$(".slide .img[data-slide-imgId=" + i + "]").attr("class", fy[0]);
				} else {
					$(".slide .img[data-slide-imgId=" + i + "]").attr("class", fy[i + 1]);
				}
			}
			imgClickFy();
			slideLi();
		}
		// function button(){
		// vm.fenxiang();
		// }
		//轮播图片左右图片点击翻页
		function imgClickFy() {
			// $(".slide .img").attr("onclick","button()");
			$(".slide .img2").attr("onclick", "left()");
			$(".slide .img4").attr("onclick", "right()");
		}

		//修改当前最中间图片对应按钮选中状态
		function slideLi() {
			var slideList = parseInt($(".slide .img3").attr("data-slide-imgId")) + 1;
		}

		//轮播按钮点击翻页
		function tz(id) {
			var tzcs = id - (parseInt($(".slide .img3").attr("data-slide-imgId")) + 1);
			if (tzcs > 0) {
				for (i = 0; i < tzcs; i++) {
					setTimeout(function() {
						right();
					}, 1);
				}
			}
			if (tzcs < 0) {
				tzcs = (-tzcs);
				for (i = 0; i < tzcs; i++) {
					setTimeout(function() {
						left();
					}, 1);
				}
			}
			slideLi();
		}


		//触摸滑动模块
		function k_touch() {
			var _start = 0,
				_end = 0,
				_content = document.getElementById("slide");
			_content.addEventListener("touchstart", touchStart, false);
			_content.addEventListener("touchmove", touchMove, false);
			_content.addEventListener("touchend", touchEnd, false);

			function touchStart(event) {
				var touch = event.targetTouches[0];
				_start = touch.pageX;
			}

			function touchMove(event) {
				var touch = event.targetTouches[0];
				_end = (_start - touch.pageX);
			}

			function touchEnd(event) {
				if (_end < -100) {
					left();
					_end = 0;
				} else if (_end > 100) {
					right();
					_end = 0;
				}
			}
		}

		function getNum() {
			var num = $("img").size();
			console.log(num);
		}

		function btnClick() {
			var news = vm.postList;
			//获取元素
			var cent = document.getElementById("slide");
			for (var i = 0; i < news.length; i++) {
				cent.innerHTML += '<div class="img" @click="getList(index=' + i + ')"><img id="' + i + '" src="' + apiUrl + news[i]
					['image'] + '"/></div>';
			}
		}

		function lunbo() {
			var UIScrollPicture = api.require('UIScrollPicture');
			UIScrollPicture.open({
				rect: {
					x: 0,
					y: 126,
					w: api.winWidth,
					h: api.winHeight / 1.8
				},
				data: {
					paths: vm.data,
				},
				styles: {
					caption: {
						height: 35,
						color: '#E0FFFF',
						size: 13,
						bgColor: '#696969',
						position: 'bottom'
					},
					/* indicator: {
						dot: {
							w: 10,
							h: 10,
							r: 5,
							margin: 20
						},
						align: 'center',
						color: '#FFFFFF',
						activeColor: '#DA70D6'
					} */
				},
				placeholderImg: 'widget://res/slide1.jpg',
				contentMode: 'scaleToFill',
				interval: 3,
				fixedOn: api.frameName,
				loop: true,
				fixed: false
			}, function(ret, err) {
				if (ret.eventType == 'click') {
					console.log("三")
					api.openWin({
						name: 'fenxiang',
						reload: true,
						url: '../home/fenxiang.html',
						pageParam: {
							url: vm.data[ret.index]
						}

					})
					console.log(JSON.stringify(ret));
				} else {}
			});
		}
	</script>
</html>
